<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                template="./../Template/TechnicainTemplate.xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui" >

    <ui:define name="content">
        <f:view>
            <h:form id="form" >
                <h:outputLabel value="MANAGE CATEGORY BY TECHNICAIN" style="color: #0099cc;font-size: large;font-weight: bold"/>
                <p:panelGrid columns="1" style="width: 780px">

                    <f:facet name="header">  
                        List All Category
                    </f:facet>
                    
                        <h:form id="form">
                            <h1><h:outputText value="List"/></h1>
                            <p:dataTable value="#{categogyBean.categorys}" var="item1" paginator="true" rows="10"  
                                 paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"  
                                 rowsPerPageTemplate="5,10,15" style="width: 760"  rowKey="#{item1.categoryID}}"
                                 selection="#{categogyBean.categoryselected}" selectionMode="single">
                              
                                <p:column>
                                    <f:facet name="header">
                                        <h:outputText value="CategoryID"/>
                                    </f:facet>
                                    <h:outputText value="#{item1.categoryID}"/>
                                </p:column>
                                <p:column>
                                    <f:facet name="header">
                                        <h:outputText value="CategoryName"/>
                                    </f:facet>
                                    <h:outputText value="#{item1.categoryName}"/>
                                </p:column>
                                <p:column>
                                    <f:facet name="header">
                                        <h:outputText value="Symbol"/>
                                    </f:facet>
                                    <h:outputText value="#{item1.symbol}"/>
                                </p:column>
                                <p:column>
                                    <f:facet name="header">
                                        <h:outputText value="Solution"/>
                                    </f:facet>
                                    <h:outputText value="#{item1.solution}"/>
                                </p:column>
                                <p:column>
                                    <f:facet name="header">
                                        <h:outputText value="Description"/>
                                    </f:facet>
                                    <h:outputText value="#{item1.description}"/>
                                </p:column>
                               <f:facet name="footer">  
                                    <p:commandButton id="viewButton" value="View" icon="ui-icon-search"  
                                                     update=":form:form:display" oncomplete="categoryDialog.show()"/>  
                                </f:facet> 
                            </p:dataTable>
                       
                        <p:dialog id="dialog" header="Category Detail" widgetVar="categoryDialog" resizable="false"  
                                        showEffect="explode" hideEffect="explode">  

                            <h:panelGrid id="display" columns="2" cellpadding="20" width="20">  

                                   
                                    <h:outputText value="CategoryID:" />  
                                    <h:outputText value="#{categogyBean.categoryselected.categoryID}" />  

                                    <h:outputText value="CategoryName:" />  
                                    <h:outputText value="#{categogyBean.categoryselected.categoryName}" />  

                                    <h:outputText value="Symbol:" />  
                                    <h:outputText value="#{categogyBean.categoryselected.symbol}" />  

                                    <h:outputText value="Solution:" />  
                                    <h:outputText value="#{categogyBean.categoryselected.solution}" /> 
                                    
                                    <h:outputText value="Description:" />  
                                    <h:outputText value="#{categogyBean.categoryselected.description}" />  
                                </h:panelGrid>  
                            </p:dialog>  
                     </h:form>
                </p:panelGrid>
            </h:form>
        </f:view>

    </ui:define>

</ui:composition>
